import React, { Suspense } from 'react'
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"
import routers from "./router_config"
type Props = {}

const RouterView = (props: Props) => {
  const render = (arr: any) => {
    return arr.map((item: { children: Array<[]>, element: any, to: any, path: string | undefined }, index: number) => {
      return <Route
        key={index}
        path={item.path}
        element={item.to ? <Navigate to={item.to} /> : <item.element />}>
        {
          item.children && render(item.children)
        }
      </Route>
    })
  }
  return (
    <Suspense fallback={<>路由加载中....</>}>
      <BrowserRouter>
        <Routes>
          {
            render(routers)
          }
        </Routes>
      </BrowserRouter>
    </Suspense>
  )
}

export default RouterView